{% extends "uc/uc-base.html" %}
{% load static %}
{% block content %}
    {#    弹窗#}
    {% if messages %}
        <script>
            {% for msg in messages %}
                alert('{{ msg.message }}');
            {% endfor %}
        </script>
    {% endif %}

    <!-- Row Highlight Javascript -->
    <script type="text/javascript">
        window.onload = function () {
            var tfrow = document.getElementById('tfhover').rows.length;
            var tbRow = [];
            for (var i = 1; i < tfrow; i++) {
                tbRow[i] = document.getElementById('tfhover').rows[i];
                tbRow[i].onmouseover = function () {
                    this.style.backgroundColor = '#ffffff';
                };
                tbRow[i].onmouseout = function () {
                    this.style.backgroundColor = '#e5ffff';
                };
            }
        };
    </script>

    <style type="text/css">
        table.tftable {
            font-size: 14px;
            color: #333333;
            width: 100%;
            border-width: 1px;
            border-color: #729ea5;
            border-collapse: collapse;
        }

        table.tftable th {
            font-size: 14px;
            color: #585757;
            background-color: #80bef1;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #4ea9f3;
            text-align: left;
        }

        table.tftable tr {
            background-color: #e5ffff;
        }

        table.tftable td {
            font-size: 14px;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #4ea9f3;
        }
    </style>

    <div class="wrapper uc-router">
        <ul>
            <li><a href="{% url 'index' %}">TOP</a></li>
            <li><span class="divider"></span></li>
            <li><span><a href="{% url 'uc_account' %}">My Page</a></span></li>
            <li><span class="divider"></span></li>
            <li><span>アカウント</span></li>
        </ul>
    </div>

    <div class="wrapper">
        <div class="uc-main clearfix">

            <div class="uc-aside">
                <div class="uc-menu">
                    <div class="tit">My Page</div>
                    <ul class="sublist">
                        <li><a href="{% url 'uc_account' %}">アカウント</a></li>
                        <li><a href="{% url 'uc_collection' %}">ブックマーク</a></li>
                        <li><a href="{% url 'uc_history' %}">閲覧履歴</a></li>
                        <li><a href="{% url 'uc_vip' %}">有料会員</a></li>
                        <li><a href="{% url 'uc_contact' %}">問い合わせ</a></li>
                    </ul>
                </div>
            </div>

            <div class="uc-content">
                <div class="uc-panel account-panel">
                    <div class="user-info">
                        <a href=""><img class="headpic" src="{% static 'uc/uploads/4.jpg' %}" alt="icon"/></a>
                        <div class="info">
                            <div><span class="name">{{ user.username }}</span><span class="wel">こんにち</span></div>
                            <a href="" class="label" {% if vips %} style="background-color: #ee9f28" {% endif %}>
                                {% if vips %}有料{% else %}一般{% endif %}会員
                            </a>
                            {#                            <a href="" class="edit">修改个人信息></a>#}
                        </div>
                    </div>
                    <div class="quick-menu">

                        <div class="item">
                            <a href=""><img class="ico" src="{% static 'uc/img/ico/uc-aq.png' %}"/>VIP情報</a>
                        </div>
                        <div class="item">
                        </div>
                        {% for v in vips %}
                            {% if not v.web %}
                                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VIP会員 ----
                                    使用期限：{{ v.end_time|date:"Y/m/d" }}</p>
                            {% else %}
                                <p>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ v.web.name }}
                                    VIP ---- 使用期限：{{ v.end_time|date:"Y/m/d" }}</p>
                            {% endif %}
                        {% endfor %}
                        <p>{{ vip_info }}</p>
                    </div>
                </div>
                <div class="uc-panel">
                    <div class="uc-bigtit">My　Page</div>
                    <div class="uc-panel-bd">
                        <div class="account-info clearfix">
                        <form action="{% url 'uc_account' %}" method="POST">
                        {% csrf_token %}
                            <div class="col-userinfo">
                                <div class="control-group">
                                    <div class="hd">* E-mail：</div>
                                    <div class="bd">
                                        <div class="text-black">{{ user.email }}</div>
                                    </div>
                                </div>

                                <div class="control-group">
                                    <div class="hd">* パスワード：</div>
                                    <div class="bd"><input disabled class="ui-txtin" type="text" name=""
                                                           placeholder="********" value="********"/>
                                        <a class="edit-btn" href="{% url 'uc_verify2' %}">変更</a></div>
                                </div>
                                <div class="control-group">
                                    <div class="hd">氏　 名：</div>
                                    <div class="bd"><input class="ui-txtin" type="text" name="truename"
                                            {% if user.truename %}
                                                           value="{{ user.truename }}"
                                            {% endif %}
                                                           placeholder="氏名を入力してください"/></div>
                                </div>
                                <div class="control-group">
                                    <div class="hd">連絡先：</div>
                                    <div class="bd"><input class="ui-txtin" type="text" name="phone" id="birthday"
                                            {% if user.phone %}
                                                           value="{{ user.phone }}"
                                            {% endif %}
                                                           placeholder="電話番号を入力してください"/></div>
                                </div>
                                <div class="control-group">
                                    <div class="hd">会社名：</div>
                                    <div class="bd"><input class="ui-txtin" type="text" name="company_name"
                                            {% if user.company_name %}
                                                           value="{{ user.company_name }}"
                                            {% endif %}
                                                           placeholder="会社名を入力してください"/></div>
                                </div>
                                <div class="control-group">
                                    <div class="hd">住   所：</div>
                                    <div class="bd"><input class="ui-txtin" type="text" name="company_address"
                                            {% if user.company_address %}
                                                           value="{{ user.company_address }}"
                                            {% endif %}
                                                           placeholder="住所を入力してください"/></div>
                                </div>
                                {#                                <div class="control-group">#}
                                {#                                    <div class="hd">所在地：</div>#}
                                {#                                    <div class="bd">#}
                                {#                                        <select name=""class="ui-txtin" style="width: 100px;"></select>#}
                                {#                                    </div>#}
                                {#                                </div>#}
                                <div class="control-group">
                                    <div class="hd">会員種類：</div>
                                    <div class="bd">
                                        <label class="check"><input type="radio" name="sex" {% if vips %}checked{% endif %} disabled/>有料会員</label>
                                        <label class="check ml25"><input type="radio" name="sex" {% if not vips %}checked{% endif %} disabled/>一般会員</label>
                                        <a class="edit-btn" href="{% url 'uc_vip' %}">有料会員申込</a>
                                    </div>
                                </div>

                                <div class="control-group">
                                    <div class="hd">購入商品：</div>
                                    <div class="bd">
                                        <table id="tfhover" class="tftable" border="1">
                                            <tr>
                                                <th>商品名称</th>
                                                <th>開始時間</th>
                                                <th>完了時間</th>
                                                <th>使用状況</th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    {% if is_all_vip_flag %}
                                                        <embed src="{% static 'uc/img/1.svg' %}" width="25"
                                                               height="25" style="float:left">
                                                    {% else %}

                                                    {% endif %}
                                                    VIP会員
                                                </td>
                                                <td>
                                                    {% for v in vip_all %}
                                                        {% if not v.web %}
                                                            {{ v.start_time|date:"Y年m月d日" }}
                                                            (
                                                            {% if v.kind == '3' %}
                                                                三ヶ月
                                                            {% elif v.kind == '6' %}
                                                                半年
                                                            {% elif v.kind == '12' %}
                                                                一年
                                                            {% elif v.kind == '24' %}
                                                                二年
                                                            {% else %}
                                                            {% endif %}
                                                            )
                                                            <br>
                                                        {% endif %}
                                                    {% endfor %}
                                                </td>
                                                {#                                                            <td>{{ v.end_time|date:"Y年m月d日" }}</td>#}
                                                {#                                                            <td>{% if v.over %}停止中{% else %}使用中{% endif %}</td>#}

                                                <td>
                                                    {% for v in vip_all %}
                                                        {% if not v.web %}
                                                            {{ v.end_time|date:"Y年m月d日" }}<br>
                                                        {% endif %}
                                                    {% endfor %}
                                                </td>
                                                <td>
                                                    {% for v in vip_all %}
                                                        {% if not v.web %}
                                                            {% if v.over %}停止中<br>{% else %}使用中<br>{% endif %}
                                                        {% endif %}
                                                    {% endfor %}
                                                </td>
                                            </tr>
                                            {% for w in web_list %}
                                                <tr>
                                                    <td>
                                                        {% if w.1 == 1 %}
                                                            <embed src="{% static 'uc/img/1.svg' %}" width="25"
                                                                   height="25" style="float:left">
                                                        {% else %}

                                                        {% endif %}
                                                        {{ w.0.name }}
                                                    </td>
                                                    <td>
                                                        {% for v in vip_all %}
                                                            {% if v.web.name == w.0.name %}
                                                                {{ v.start_time|date:"Y年m月d日" }}
                                                                (
                                                                {% if v.kind == '3' %}
                                                                    三ヶ月
                                                                {% elif v.kind == '6' %}
                                                                    半年
                                                                {% elif v.kind == '12' %}
                                                                    一年
                                                                {% elif v.kind == '24' %}
                                                                    二年
                                                                {% else %}
                                                                {% endif %}
                                                                )
                                                                <br>
                                                            {% endif %}
                                                        {% endfor %}
                                                    </td>
                                                    {#                                                            <td>{{ v.end_time|date:"Y年m月d日" }}</td>#}
                                                    {#                                                            <td>{% if v.over %}停止中{% else %}使用中{% endif %}</td>#}

                                                    <td>
                                                        {% for v in vip_all %}
                                                            {% if v.web.name == w.0.name %}
                                                                {{ v.end_time|date:"Y年m月d日" }}<br>
                                                            {% endif %}
                                                        {% endfor %}
                                                    </td>
                                                    <td>
                                                        {% for v in vip_all %}
                                                            {% if v.web.name == w.0.name %}
                                                                {% if v.over %}停止中<br>{% else %}使用中<br>{% endif %}
                                                            {% endif %}
                                                        {% endfor %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </table>

                                    </div>
                                </div>

                                <div class="control-submit">
                                    <input class="ui-btn-theme submit" type="submit" value="確認"/>
                                </div>


                            </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}